<template>
  <div class="center_history_container">
    <div class="block" @click="toPage" v-if="historyData.history_list">
      <!-- 清空历史记录 -->
      <div class="clearHistory">清空历史</div>
      <el-timeline>
        <el-timeline-item
          :timestamp="item.history_time"
          v-for="item in historyData.history_list"
          :key="item.id"
          placement="top"
        >
          <div
            class="history_item"
            v-for="cont in item.history_content"
            :key="cont.article_id"
          >
            <div class="article_title">
              <div
                class="article_title_span"
                :data-article-id="cont.article_id"
              >
                {{ cont.article_title | uncodeUtf16 }}
              </div>
            </div>
            <div class="author_box">
              <div class="box">
                <div class="author_avatar rounded-circle overflow-hidden">
                  <img
                    v-lazy="cont.author_avatar"
                    class="img-fluid w-100 h-100"
                    alt=""
                  />
                </div>
                <div class="author_name" :data-user-id="cont.author_id">
                  {{ cont.author_name | uncodeUtf16 }}
                </div>
              </div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="empty" v-if="contentLength">😅空空如也...</div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { format, transformHistory } from "@/utils/format_date";
import { clearHistory } from "@/api/users";

export default {
  name: "CenterHistory",
  computed: {
    ...mapState("user", ["aimUserInfo"]),
  },
  watch: {
    aimUserInfo() {
      this._init_browseHistory();
    },
  },
  data() {
    return {
      historyData: {},
      contentLength: false,
    };
  },
  methods: {
    // 获取历史浏览
    async _init_browseHistory() {
      // 没有数据时不进行发送
      if (!this.aimUserInfo.user_id) return;
      let result = await this.$api.getBrowseHistory({
        user_id: this.aimUserInfo.user_id,
        time: new Date(),
      });
      if (result.code === 200) {
        this.historyData = result.data;
        if (!result.data.history_list) {
          this.contentLength = true;
        }
        // 数据不为空
        if (result.data.history_list) {
          // 对历史数据从json转为对象
          this.historyData.history_list = JSON.parse(
            this.historyData.history_list
          );
          // 将时间戳改为指定时间
          this.historyData.history_list.forEach((item) => {
            item.history_time = transformHistory(format(item.history_time));
          });
        }
        // 关闭加载loading
        this.$parent.$parent.loadingResource = false;
      }
    },
    // 跳转页面
    toPage($event) {
      let {
        target: { className },
      } = $event;
      if (className === "article_title_span") {
        let {
          dataset: { articleId },
        } = $event.target;
        this.$router.push(`/community/detail/${articleId}`);
      } else if (className === "author_name") {
        let {
          dataset: { userId },
        } = $event.target;
        this.$router.push(`/center/${userId}`);
      } else if (className === "clearHistory") {
        clearHistory(this.aimUserInfo.user_id);
        this._init_browseHistory().then(() => {
          this.historyData = {};
          this.contentLength = true;
        });
      }
    },
  },
  mounted() {
    this.$parent.active = 6;
    this._init_browseHistory();
  },
};
</script>

<style lang="less" scoped>
.center_history_container {
  position: relative;
  /deep/ .el-timeline {
    padding-top: 28px;
  }
  .clearHistory {
    cursor: url("@/assets/mouse/x2.cur"), auto !important;
    position: absolute;
    right: 20px;
    z-index: 2;
    top: 18px;
    display: block;
    width: 72px;
    height: 28px;
    line-height: 28px;
    border-radius: 14px;
    border: 1px solid #ccccd8;
    font-size: 12px;
    color: #555666;
    text-align: center;
    font-weight: 400;
  }
  .block {
    margin-right: 20px;
  }
  /deep/ .el-timeline {
    .el-timeline-item {
      padding-bottom: 0;
      .el-timeline-item__content {
        padding-bottom: 28px;
      }
    }
    .el-timeline-item__node--normal {
      left: 1px;
      width: 8px;
      height: 8px;
    }
    .el-timeline-item__tail {
      display: block;
      border-left: 1px solid #e4e7ed;
    }
    .el-timeline-item__timestamp {
      text-align: left;
      font-size: 14px;
      padding-top: 2px;
    }
    .el-timeline-item__content {
      padding-top: 14px;
    }
  }
  .history_item {
    border: 1px solid #f0f0f2;
    border-top: none;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 24px;
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: 0 2px 6px 0 rgb(0 0 0 / 4%);
    }
    &:first-of-type {
      border-top: 1px solid #f0f0f2;
    }
    .article_title {
      font-size: 16px;
      .article_title_span {
        /* 省略号 */
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        width: 100%;
        cursor: url("@/assets/mouse/x2.cur"), auto !important;
        &:hover {
          text-decoration: underline;
        }
      }
    }
    .author_box {
      margin-top: 8px;
      display: flex;
      .box {
        display: inline-flex;
        cursor: url("@/assets/mouse/x2.cur"), auto !important;
      }
    }
    .author_avatar {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
    .author_name {
      font-size: 14px;
      color: #999aaa;
    }
  }
}
</style>